import { Children, useMemo, useState } from "react";
import styled from "styled-components";
import Child1 from "./child";
import Child2 from "./child1";

const Parent = ({ children }: { children: any }) => {
    const [count, setCount] = useState<number>(10)
    const [visible, setVisible] = useState<boolean>(false)
    const [title, setTitle] = useState<string>("hello")
    console.log("parent 执行")
    const handleVisible = () => {
        setVisible(!visible)
    }
    const handleCount = () => {
        setCount(count + 1)
    }
    const handleTitle = () => {
        setTitle(title + (count + 1))
    }
    const Child2Memo = useMemo(() => {
       // console.log("child2Memo")
        return <Child2 val={title} />
    }, [title])
    return (
        <Wrapper>
           {/*  <Header>
                <Text>visible state:{String(visible)}</Text>
                <Text>count state:{count}</Text>
                <Text>title state:{title}</Text>
                <ButtonWrapper>
                    <Button onClick={handleVisible}>更改visible</Button>
                    <Button onClick={handleCount}>更改count</Button>
                    <Button onClick={handleTitle}>更改<title></title></Button>
                </ButtonWrapper>
            </Header> */}
            <WrapperChild>
{/*                 <Child1 val={count} />
                {Child2Memo} */}
            </WrapperChild>
            <Wrapper>
                {children}
            </Wrapper>
        </Wrapper>
    )
}
export default Parent
const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
`
const WrapperChild = styled(Wrapper)`
  flex-direction: row;
`
const Header = styled.div`
  display: flex;
  flex-direction: column;
`
const Text = styled.div`
    margin: 20px;
    color:red;
`
const ButtonWrapper = styled.div`
    display: flex;
    justify-content: space-around;
`
const Button = styled.div`
    width: 200px;
    height: 32px;
    line-height:32px;
    background-color: #d6ec10;
    color:#fff;
    font-size: 14px;
    font-weight:bold;
`